<template>
  <div>
    <vc-entity @click="doLineClick">
      <vc-graphics-polyline-volume
        ref="lineRef"
        :positions="getLinePosition()"
        :shape="shape"
        :material="data.faceColor"
        :cornerType="0"
      ></vc-graphics-polyline-volume>
    </vc-entity>
    <vc-entity v-if="showLine">
      <vc-graphics-polyline
        :positions="getPolyLinePosition()"
        :material="data.lineColor"
        :width="1"
        :clampToGround="false"
      ></vc-graphics-polyline>
    </vc-entity>

    <!-- 信息弹框 -->
    <el-drawer
      v-model="visible"
      :size="420"
      class="route-show-drawer"
      @close="handleDrawerClose"
    >
      <template #header>
        <span>{{ info.text }}</span>
        <el-space>
          <el-icon :size="16" @click="handleEdit" style="cursor: pointer"
            ><Edit
          /></el-icon>
        </el-space>
      </template>
      <el-form
        :model="data"
        :label-position="'right'"
        label-width="145px"
        style="height: 100%; width: 85%"
      >
        <el-form-item label="起飞点名称">
          <span v-if="!info.isEdit">{{ data.startName }}</span>
          <el-input v-model="data.startName" v-else></el-input>
        </el-form-item>
        <el-form-item label="降落点名称">
          <span v-if="!info.isEdit">{{ data.endName }}</span>
          <el-input v-model="data.endName" v-else></el-input>
        </el-form-item>
        <el-form-item label="航路长度">
          <span>{{ data.length }}米</span>
        </el-form-item>
        <el-form-item label="航路高度">
          <span v-if="!info.isEdit">{{ data.lineHeight }}米</span>
          <el-input v-model="data.lineHeight" v-else></el-input>
        </el-form-item>
        <el-form-item label="航路左右偏置">
          <span v-if="!info.isEdit">{{ data.leftRightBias }}米</span>
          <el-input v-model="data.leftRightBias" v-else></el-input>
        </el-form-item>
        <el-form-item label="航路上下偏置">
          <span v-if="!info.isEdit">{{ data.upDownBias }}米</span>
          <el-input v-model="data.upDownBias" v-else></el-input>
        </el-form-item>
        <el-form-item label="起降航路半径">
          <span v-if="!info.isEdit"> {{ data.corridorRadius }}米</span>
          <el-input v-model="data.corridorRadius" v-else></el-input>
        </el-form-item>
        <el-form-item label="航路费用">
          <span v-if="!info.isEdit">{{ data.cost || getRandow() }}元</span>
          <el-input v-model="data.cost" v-else></el-input>
        </el-form-item>
      </el-form>
      <template #footer v-if="info.isEdit">
        <div class="dialog-footer">
          <el-popconfirm title="确定要删除么?" @confirm="handleDelete">
            <template #reference>
              <el-button>删除</el-button>
            </template>
          </el-popconfirm>
          <el-button type="primary" @click="handleUpdate">修改</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { toRefs, ref, watch } from "vue";
import { Cartesian3 } from "cesium";
import {
  VcEntity,
  VcGraphicsPolylineVolume,
  VcGraphicsPolyline,
} from "vue-cesium";
import { ElMessage } from "element-plus";
import api from "@/api";

// 航线dom
const lineRef = ref(null);
const visible = ref(false);

const props = defineProps({
  data: Object,
  showLine: Boolean,
});

const info = ref({
  text: "航路详情",
  isEdit: false,
});

const { data, showLine } = toRefs(props);
// 保存原始颜色
const originColor = data.value.faceColor;

const shape = [
  new Cartesian3(-data.value.leftRightBias, -data.value.upDownBias, 0), // 左下角
  new Cartesian3(data.value.leftRightBias, -data.value.upDownBias, 0), // 右下角
  new Cartesian3(data.value.leftRightBias, data.value.upDownBias, 0), // 右上角
  new Cartesian3(-data.value.leftRightBias, data.value.upDownBias, 0), // 左上角
];

const getPolyLinePosition = () => {
  const positions = getLinePosition();
  return positions.map((item) => ({
    lng: item.lng,
    lat: item.lat,
    height: data.value.lineHeight,
  }));
};
const getLinePosition = () => {
  const startPoint = {
    lng: data.value.startPoint.longitude,
    lat: data.value.startPoint.latitude,
    height: data.value.lineHeight - data.value.upDownBias,
  };
  const points = (data.value.points || []).map((item) => ({
    lng: item.longitude,
    lat: item.latitude,
    height: data.value.lineHeight - data.value.upDownBias,
  }));
  const endPoint = {
    lng: data.value.endPoint.longitude,
    lat: data.value.endPoint.latitude,
    height: data.value.lineHeight - data.value.upDownBias,
  };
  return [startPoint, ...points, endPoint];
};

// 对航路点击函数
const doLineClick = (e) => {
  // data.value.faceColor = "RGBA(255,144,8,0.6)";
  visible.value = true;
};

// 更改回调
const handleEdit = () => {
  info.value.text = "信息编辑";
  info.value.isEdit = true;
};
// 删除方法
const handleDelete = () => {
  api
    .delAirRoute(data.value.id)
    .then(({ code }) => {
      if (code == 200) {
        ElMessage.success("删除成功");
      } else {
        ElMessage.error("修改失败");
      }
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      handleDrawerClose();
    });
};
// 关闭回调
const handleDrawerClose = () => {
  info.value.isEdit = false;
  info.value.text = "航路详情";
  visible.value = false;
};
// 修改数据
const handleUpdate = () => {
  const newData = JSON.parse(JSON.stringify(data.value));
  delete newData["startPoint"];
  delete newData["endPoint"];
  delete newData["points"];
  api
    .updateAirRoute(newData)
    .then(({ code, msg }) => {
      if (code === 200) {
        ElMessage.success("修改成功");
      } else {
        ElMessage.error(msg || "修改失败");
      }
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      handleDrawerClose();
    });
};

// 监听函数
watch(visible, (newVal, oldVal) => {
  if (newVal) {
    data.value.faceColor = "RGBA(255,144,8,0.6)";
  } else {
    data.value.faceColor = originColor;
  }
});

// 随机获取费用函数
const getRandow = () => {
  return Math.ceil(Math.random() * 20 + 30);
};
</script>

<style scoped></style>
